<template>
  <div class="app">
    <h2>App</h2>
    <input type="text" v-model="message" />
    <!-- 1. v-model本质 -->
    <!-- <input type="text" :value="message" @input="message = $event.target.value" /> -->

    <!-- 2. 组件的v-model -->
    <!-- <counter v-model="appCounter"></counter> -->
    <!-- $event为内部发送自定义函数传递的参数, 而不是$event对象 -->
    <!-- 默认的v-model -->
    <!-- <counter :modelValue="appCounter" @update:modelValue="appCounter = $event"></counter> -->

    <!-- 3.组件的v-model: 自定义名称counter -->
    <counter2 v-model:counter="appCounter" v-model:why="appWhy"></counter2>
  </div>
</template>

<script>
import Counter from './views/Counter.vue'
import Counter2 from './views/Counter2.vue'

export default {
  components: {
    Counter,
    Counter2,
  },
  data() {
    return {
      message: '',
      appCounter: 100,
      appWhy: 'appWhy',
    }
  },
}
</script>

<style scoped></style>
